<template>
    <div class="detail">
        <el-container >
            <el-header>
                <el-steps :active="active"
                          style="margin:20px 50px 20px 50px"
                          finish-status="success">
                    <el-step title="车库信息填写" ></el-step>
                    <el-step title="营业信息填写" ></el-step>
<!--                    <el-step title="收费规则添加" ></el-step>-->
                </el-steps>
            </el-header>
            <el-container>
                <el-main v-show="active==0">
                    <el-form  :model="form" style="margin-top: 20px" label-width="130px">
                            <el-alert
                                    style="margin-bottom: 20px;"
                                    title="车库基本信息"
                                    center
                                    type="success"
                                    :closable="false">
                            </el-alert>
                            <el-form-item label="车库名">
                                <el-input v-model="form.parkingName" style="width: 70%"></el-input>
                                <span style="color: red;margin-left: 5px;">*</span>
                            </el-form-item>
                            <el-form-item label="车库图片">
                                <upload-img v-model="form.picIds"></upload-img>
                            </el-form-item>
                            <el-form-item label="车库种类">
                                <el-select :value="form.parkingSortCode" v-model="form.parkingSortCode" placeholder="请选择车库种类">
                                    <el-option
                                            v-for="option in parkingSortOption"
                                            :key="option.codeValue"
                                            :label="option.valueDesc"
                                            :value="option.id"></el-option>
                                </el-select>
                                <span style="color: red;margin-left: 5px;">*</span>
                            </el-form-item>
                            <el-form-item label="车位数">
                                <el-input-number v-model="form.carPlaceNum" :step="1" :min="10"></el-input-number>
                            </el-form-item>
                            <el-form-item label="是否营业">
                                <el-switch
                                        style="display: inline-block"
                                        v-model="form.isBusiness"
                                        active-color="#13ce66"
                                        active-value=17
                                        inactive-value=18>
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="车库状态">
                                <el-radio-group v-model="form.parkingStatusCode">
                                    <el-radio
                                            v-for="option in parkingStatusOption"
                                            :key="option.id"
                                            :label="option.id"
                                    >{{option.valueDesc}}</el-radio>
                                </el-radio-group>
                                <span style="color: red;margin-left: 5px;">*</span>
                            </el-form-item>
                            <el-form-item label="车库地址">
                                <el-input res v-model="form.location" style="width: 70%"></el-input>
                                <el-button style="margin-left: 10px"  type="info" icon="el-icon-location" size="mini" circle @click="showMap"></el-button>
                                <span style="color: red;margin-left: 5px;">*</span>
                            </el-form-item>
                            <el-form-item label="联系电话">
                                <el-input v-model="form.parkingPhone" style="width: 50%"></el-input>
                            </el-form-item>
                            <el-form-item label="选择车库管理员">
                                <el-select :value="form.userId" v-model="form.userId" placeholder="选择管理员">
                                    <el-option v-for="user in userOption"
                                               :key="user.id"
                                               :label="user.userName"
                                               :value="user.id"></el-option>
                                </el-select>
                                <span style="color: red;margin-left: 5px;">*</span>
                            </el-form-item>
                        </el-form>
                </el-main>
                <el-main v-show="active==1" >
                    <el-container>
                       <el-header>
                           <el-alert
                                   style="margin-bottom: 20px"
                                   title="车库营业信息"
                                   center
                                   type="info"
                                   :closable="false">
                           </el-alert>
                       </el-header>
                        <el-main ><el-form  :model="form" style="margin-top: 20px" label-width="130px">
                            <el-form-item label="预约订单保留时间">
                                <el-input-number v-model="form.reservationTime" :precision="1" :min="5" :step="0.1" label="预约订单保留时间"></el-input-number>
                                <span style="margin-left: 5px">分钟</span>
                            </el-form-item>
                            <el-form-item label="折扣">
                                <el-input-number v-model="form.discount"  :step="1" :max="10" :min="1" label="折扣"></el-input-number>
                                <span style="margin-left: 5px">折</span>
                            </el-form-item>
                            <el-form-item label="最大停车时间">
                                <el-input-number v-model="form.maxTime"  :step="1"  :min="1" label="折扣"></el-input-number>
                                <span style="margin-left: 5px">小时</span>
                            </el-form-item>
                            <el-form-item label="车库描述">
                                <el-input type="textarea" v-model="form.parkingDesc"></el-input>
                            </el-form-item>
                        </el-form></el-main>
                    </el-container>
                </el-main>
<!--                <el-main v-show="active==2">-->
<!--                    <div style="margin-bottom: 30px">-->
<!--                        <el-select v-model="payRuleModel.parentId"-->
<!--                                   :clearable="true"-->
<!--                                   placeholder="请选择车库种类">-->
<!--                            <el-option-->
<!--                                    v-for="option in payRuleOption"-->
<!--                                    :key="option.id"-->
<!--                                    :label="option.ruleClassDesc"-->
<!--                                    :value="option.id"></el-option>-->
<!--                        </el-select>-->
<!--                        <el-button v-if="payRuleModel.parentId"-->
<!--                                   style="margin-left: 50px"-->
<!--                                   type="primary"-->
<!--                                   @click="addPayRule"-->
<!--                        >添加</el-button>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <elx-editable-->
<!--                        ref="elxEditable"-->
<!--                        height="400"-->
<!--                        :header-cell-style="tableHeader"-->
<!--                        :edit-config="{trigger: 'click', mode: 'cell', activeMethod}"-->
<!--                        :context-menu-config="{bodyMenus}"-->
<!--                        >-->
<!--                            <elx-editable-column-->
<!--                                    prop="parentId"-->
<!--                                    label="类型"-->
<!--                                    width="150"-->
<!--                                    :edit-render="{name: 'ElSelect',options:payRuleOption,optionProps:{value:'id',label:'ruleClassDesc'}}">-->
<!--                            </elx-editable-column>-->
<!--                            <elx-editable-column-->
<!--                                    prop="timeStart"-->
<!--                                    label="时段开始"-->
<!--                                    width="150"-->
<!--                                    :edit-render="{name:'ElTimePicker'}"-->
<!--                            >-->
<!--                            </elx-editable-column>-->
<!--                            <elx-editable-column-->
<!--                                    prop="timeEnd"-->
<!--                                    label="时段结束"-->
<!--                                    width="150"-->
<!--                                    :edit-render="{name:'ElTimePicker'}"-->
<!--                            >-->
<!--                            </elx-editable-column>-->
<!--                            <elx-editable-column-->
<!--                                    prop="money1"-->
<!--                                    label="(时段/大型车/常规)价格/元"-->
<!--                                    width="200"-->
<!--                                    :edit-render="{name:'ElInputNumber'}"-->
<!--                            >-->
<!--                            </elx-editable-column>-->
<!--                            <elx-editable-column-->
<!--                                    prop="money2"-->
<!--                                    label="(其他时段/小型车)价格/元"-->
<!--                                    width="200"-->
<!--                                    :edit-render="{name:'ElInputNumber'}"-->
<!--                            >-->
<!--                            </elx-editable-column>-->
<!--                            <elx-editable-column-->
<!--                                    prop="payRule"-->
<!--                                    label="收费规则简述"-->
<!--                                    :edit-render="{name:'ElInput'}"-->
<!--                            >-->
<!--                            </elx-editable-column>-->
<!--                        </elx-editable>-->
<!--                    </div>-->
<!--                </el-main>-->
            </el-container>
            <el-footer>
                <div style="text-align: center">
                    <el-button type="primary" @click="addParking">保存并下一步</el-button>
                </div>
            </el-footer>
            <el-dialog
                    :visible.sync="isVisible"
                    width="1000px"
                    :show-close="false"
                    title="选择地址"
            >
                <h1 style="margin-bottom: 15px">地址：{{form.location}}</h1>
                <div id="container" style="width: 100%;height: 400px">
                </div>
                <div id="myPageTop">
                    <span style="display: block">输入关键字：</span>
                    <input :value="input" id="SearchLocal" style="float: right"/>
                </div>
                <div style="margin-top: 20px;text-align: center">
                    <el-button type="primary"  @click="isVisible=false">确定</el-button>
                </div>
            </el-dialog>
        </el-container>
    </div>
</template>

<script>
    const AMap = window.AMap;
    import Message from '../../components/messages/index'
    import UploadImg from '../../components/upload/UploadImg.vue'
    export default {
        name: "Detail",
        components: { UploadImg },
        data() {
            return {
                tableHeader: {
                    "background-color": "#DCDFE6",
                    "height": "40px"
                },
                isVisible:false,
                active:0,
                form: {
                    id:null,
                    parkingName: '',
                    parkingStatusCode:null,
                    parkingSortCode:null,
                    maxTime:null,
                    isBusiness:null,
                    carPlaceNum:null,
                    hasCheap:null,
                    discount:10,
                    parkingPhone:null,
                    reservationTime:null,
                    parkingDesc:"",
                    longitude:null,
                    latitude:null,
                    location:"",
                    isUsed:0,
                    userId:null
                },
                payRuleModel:{
                    id:null,
                    timeStart:null,
                    timeEnd:null,
                    money1:null,
                    money2:null,
                    parentId:null,
                    parkingId:null,
                    payRule:"",
                },
                payRuleOption:[],
                parkingSortOption:[],
                parkingStatusOption:[],
                userOption:[],
                bodyMenus: [
                        [
                            {
                                code: 'ROW_REMOVE',
                                name: '删除',
                                prefixIcon: 'el-icon-minus'
                            },
                            {
                                code: 'ALL_REMOVE',
                                name: '删除所有行',
                                prefixIcon: 'el-icon-close'
                            },
                        ],
                 ],
                map:Object,
                autoOptions: {
                    input: "SearchLocal"
                },
                input:"",
                placeSearch: Object,
                autocomplete:Object,
            }
        },
        methods: {
            addParking() {
                switch (this.active) {
                    case 0:
                        if(this.form.parkingName===""||this.form.userId==null||this.form.parkingSortCode==null||this.form.parkingStatusCode==null||this.form.latitude==null){
                            Message.warning("请填写必填信息！")
                        }else{
                            this.$http.post("parking/add",this.form).then(res=>{
                                if(res.status===200){
                                    Message.success("保存成功！");
                                    this.$http.post("parking/selectParking",this.form).then((res)=>{
                                        if(res.status===200){
                                            //将新增的车库id返回到前端
                                            this.form.id=res.data.id;
                                        }
                                    });
                                     this.active++;
                                }else{
                                    Message.error("保存失败！")
                                }
                            });
                        }
                        break;
                    case 1:
                        this.$http.post("parking/update",this.form).then((res)=>{
                            if(res.status===200){
                                Message.success("保存成功！");
                                this.active++;
                            }
                        });
                        break;
                    case 2:
                        if(this.$refs.elxEditable.getRecords().length===0){
                            Message.warning("收费规则不为空")
                        }else{
                            this.$http.post("payRules/savePayRuleList",this.$refs.elxEditable.getRecords()).then((res)=>{
                                if(res.status===200){
                                    this.active++;
                                    Message.confirm2("保存成功，是否进行车位管理？","info").then(()=>{
                                        this.$router.push({
                                            name:"carPlaceList",
                                            params:{
                                                form:this.form,
                                            }
                                        })
                                    }).catch(()=>{
                                        this.$router.go(0)
                                    })
                                }
                            })
                        }
                }
            },
            addPayRule () {
                this.$refs.elxEditable.insert({
                    parentId: this.payRuleModel.parentId,
                    parkingId:this.form.id
                }).then(({ row }) => {
                    //判断可否编辑
                    switch (row.parentId) {
                        case 1://时段收费
                            this.$refs.elxEditable.setActiveCell(row,'timeStart');
                            break;
                        case 2://车型收费
                            this.$refs.elxEditable.setActiveCell(row,'money1');
                            break;
                        case 3://普通收费
                            this.$refs.elxEditable.setActiveCell(row,'money1');
                            break;
                    }
                })
            },
            activeMethod({row,  column}){
                let status = false;
                switch (row.parentId) {
                    case 1://时段收费
                        if(['timeStart'].includes(column.property)){
                            status=true;
                        }else if(['timeEnd'].includes(column.property)){
                            status=true;
                        }else if(['money1'].includes(column.property)){
                            status=true;
                        }else if(['money2'].includes(column.property)){
                            status=true;
                        }else if(['payRule'].includes(column.property)){
                            status=true;
                        }
                        break;
                    case 2://车型收费
                        if(['money1'].includes(column.property)){
                            status=true;
                        }else if(['money2'].includes(column.property)){
                            status=true;
                        }else if(['payRule'].includes(column.property)){
                            status=true;
                        }
                        break;
                    case 3://普通收费
                        if(['money1'].includes(column.property)){
                            status=true;
                        }else if(['payRule'].includes(column.property)){
                            status=true;
                        }
                        break;
                }
                return status;
            },
            showMap(){
              this.isVisible=true;
                this.$nextTick(()=>{
                    this.initMap();
                })
            },
            getSelectOption(){
                this.$http.post("coder/getCoderByeCodeKey",{codeKey:"parkingSortCode"}).then(res=>{
                    if(res.status===200){
                        this.parkingSortOption=res.data
                    }
                });
                this.$http.post("coder/getCoderByeCodeKey",{codeKey:"parkingStatusCode"}).then(res=>{
                    if(res.status===200){
                        this.parkingStatusOption=res.data
                    }
                });
                this.$http.get("payRules/getRuleClassList").then((res)=>{
                    if(res.status===200){
                        this.payRuleOption=res.data;
                    }
                });
                this.$http.post("user/getAdminList",{}).then(res=>{
                    if(res.status===200){
                        this.userOption=res.data
                    }
                });
            },
            initMap(){
                this.map = new AMap.Map('container', {
                    resizeEnable: true,
                    zoom: 19,
                    lang: 'zh',
                });
                this.map.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],()=>{
                    this.autocomplete = new AMap.Autocomplete(this.autoOptions);
                    this.placeSearch = new AMap.PlaceSearch({
                        map: this.map
                    });  //构造地点查询类
                });
                AMap.event.addListener(this.autocomplete, "select", this.select);//注册监听，当选中某条记录时会触发
                this.map.on("click",this.clickMap);
                this.map.plugin('AMap.Geolocation',()=>{
                    let geolocation = new AMap.Geolocation({
                        showButton: true,        //显示定位按钮，默认：true
                        buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    });
                    this.map.addControl(geolocation);
                    geolocation.getCurrentPosition();
                });
            },
            select(e){
                this.placeSearch.setCity(e.poi.adcode);
                this.placeSearch.search(e.poi.name);  //关键字查询查询
            },
            clickMap(val){
                let { lng, lat } = val.lnglat;
                this.form.longitude=lng;
                this.form.latitude=lat;
                let geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                });
                geocoder.getAddress([lng,lat], (status, result) =>{
                    if (status === 'complete' && result.info === 'OK') {
                        if (result && result.regeocode) {
                            this.form.location = result.regeocode.formattedAddress;
                        }
                    }
                });
                this.map.clearMap();
                let startIcon = new AMap.Icon({
                    // 图标尺寸
                    size: new AMap.Size(40, 40),
                    // 图标的取图地址
                    image:require('../../assets/parking.png'),
                    // 图标所用图片大小
                    imageSize: new AMap.Size(30, 30),
                });
                let mark=new AMap.Marker({
                    position:val.lnglat,
                    icon:startIcon,
                });
                this.map.add(mark);
            }
        },
        mounted() {
            this.getSelectOption();
            this.initMap();
        }
    }
</script>

<style scoped lang="less">
    .detail{
        width: 100%;
        background-color: white;
        color: #606266;
    }
    #container {width:300px; height: 180px; }
    #myPageTop{
        position: absolute;
        top: 150px;
        right: 50px;
        background-color: white;
        padding: 5px;
        border: 1px #b0a0a0 solid;
    }

</style>
